<script setup>
import {goService} from "../../tools/go";
const list1 = [
  {id:1,name:'党建组织',img:'src/static/img/server/sqyl.png'},
  {id:2,name:'党建组织',img:'src/static/img/server/sqyl.png'},
  {id:3,name:'党建组织',img:'src/static/img/server/sqyl.png'},
  {id:4,name:'党建组织',img:'src/static/img/server/sqyl.png'},
  {id:5,name:'党建组织',img:'src/static/img/server/sqyl.png'},
  {id:6,name:'党建组织',img:'src/static/img/server/sqyl.png'},
]
</script>

<template>
  <view class="titli">
    <v-icon @click="goService()" class="icon" icon="mdi-chevron-left"></v-icon>
    <h3>党建服务</h3>
    <v-icon class="icon2" icon="mdi-dots-vertical"></v-icon>
  </view>
  <view class="bg">
    <img src="../../static/img/PartyBuildingbg.png">
  </view>
  <view class="list">
    <ul>
      <li v-for="(item, index) in list1" :key="index">
        <img :src="item.img">
        <text>{{ item.name }}</text>
      </li>
    </ul>
  </view>
</template>

<style scoped lang="scss">
//党建列表
.list{
  width:100%;
  ul{
    li{
      text{
        font-size: 19px;
      }
      img{
        width: 100px;
        height: 100px;
      }
      box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
      border-radius: 9px;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    padding: 12px;
    margin-top: 10px;
    gap: 10px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.bg{
  img{
    width: 100%;
    height: 100%;
  }
  width: 100%;
  height: 200px;
}
.titli{
  h3{
    font-size: 17px;
    font-weight: 400;
  }
  .icon2{
    transform: rotate(90deg);
    font-size: 25px;
  }
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
}

</style>